<template>
	<view class="">
		<view class="nav-back">	
			<top-heigth :backTitle="backTitle"></top-heigth>
		</view>
		<view class="m-t24">
			<view class="index-top">
				<view class="index-top-l">
					<view class="box">
						<view class="font">
							<!-- <span>{{sum == ''? "0" : sum}}</span>元 -->
							<span>{{billInfo.amountSum}}</span>元
						</view>
						<view class="font2">本月收益</view>
					</view>
				</view>
				<view class="index-top-r">
					<view class="box">
						<view class="font">
							<span>{{detail.nowOrderCount}}</span>单
						</view>
						<view class="font2">本月单数</view>
					</view>
				</view>
			</view>
			
			<view class="content-box">
				<view v-if="myList.length == 0" class="kong-box">
					<uv-empty mode="" text="暂无收益明细~" icon="/static/image/kong-tixian.png"></uv-empty>
				</view>
				<view class="public-box2" style="padding-top:10rpx; padding-bottom:10rpx;">
					<view class="month-list-box">
						<view class="month-list" v-for="item in myList">
							<view class="month-list-l">
								<view v-if="item.billType == 1">订单收入</view>
								<view v-if="item.billType == 2">提现</view>
								<view v-if="item.billType == 3">推广收入</view>
								<view>{{(item.createTime).slice(0,10)}}</view>
							</view>
							<view v-if="item.billType != 2" class="red">+{{item.billAmount}}</view>
							<view v-if="item.billType == 2" class="green">-{{item.billAmount}}</view>
						</view>
						
					</view>
					
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	//import { checkLogin } from "@/util/checkLogin.js"
	export default {
		data() {
			return {
				backTitle:"本月收益",
				myList:'',
				userInfo: uni.getStorageSync('userInfo'),
				sum:'',
				startTime:'',
				endTime:'',
				detail:'',
				billInfo: {},
			}
		},
		components: { TopHeigth },
		mounted() {
			
			this.getStartTime()
			this.getEndTime()
			this.getList()
			this.getDetail()
			uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfoBill',{
					 staffId:this.userInfo.id,
			}).then((res) => {
				this.billInfo = res.data
			})
			
		},
		methods: {
			getStartTime() {
			    let date = new Date()
			    date.setDate(1) // 将当前时间的日期设置成第一天
			    let year= date.getFullYear()  // 得到当前年份 
			    let month = date.getMonth()  + 1 // 得到当前月份（0-11月份，+1是当前月份）
			    month  = month > 10 ? month :'0' + month // 补零
			    let day  = date.getDate() // 得到当前天数，实际是本月第一天，因为前面setDate(1) 设置过了
				console.log(year +'-'+ month +'-'+ day) //03
				this.startTime = year + '-' + month + '-' + day
			    return new Date(year +'-'+ month +'-'+ day) // 这里传入的是字符串
			},
			getEndTime(){
			  let  date  = new Date()
			  let year = date.getFullYear()  
			  let month = date.getMonth() +1
			 // 这里传入的是整数时间，返回的是下个月的第一天，因为月份是0-11
			  let nextMonthFirthDay = new Date(year,month,1) // 下个月的第一天
			  console.log(nextMonthFirthDay)
			  let oneDay = 1000*60 * 60 * 24 // 一天的时间毫秒数
			  let endDay = new Date(nextMonthFirthDay - oneDay) 
			  let day = endDay.getDate() // 本月最后一天
				this.endTime = year + '-' + month + '-' + day
				
			  // 这里传入的是字符串格式的时间，返回的是传入字符串的时间
			  return new Date(year + '-' + month + '-' + day)
			},
			getList(){
				//tAppBillAccountRCA/queryTAppBillAccount
					uni.$u.http.post('/api/shop/v1_0/tAppBillAccountRCA/queryTAppBillAccount',{
						billStaffId:this.userInfo.id,
						billSource: 2,
						billType: 1
					}).then((res) => {
						this.myList = res.aaData
					})
			},
			getDetail(){ // 技师详情
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
					id:this.userInfo.id,
				}).then((res) => {
					if(res.code == 400){
						return uni.redirectTo({
							url: "/pages/login/index"
						})
					}
					this.detail = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	.index-top{
		@include flex;
		align-items: center; 
		justify-content: flex-start;
		height: 200rpx;
		background:#fff url("/static/image/mouth.png") no-repeat ;
		background-size: 100% 100%;
		border-radius:26rpx;
		margin: 0 32rpx;
		box-shadow: 0rpx 0rpx 20rpx 4rpx rgba(0,0,0,0.06);
		margin-bottom:24rpx;
		
		.index-top-l{
			width: 50%;
			@include flex;
			align-items: center; 
			justify-content: center;
			border-right: 2rpx solid #eee;
		}
		.index-top-r{
			width: calc(50% - 2rpx);
			@include flex;
			align-items: center; 
			justify-content: center;
		}
		.font{
			font-weight: bold;
			font-size: 28rpx;
			color: #EB0C00;
			margin-bottom: 8rpx;
			span{
				font-size: 48rpx;
				color: #EB0C00;
			}
		}
		.font2{
			font-size: 28rpx;
			color: #999999;
		}
	}
	
	.month-list-box{
		.month-list-l{
			width: 60%;
			@include flex;
			align-items: center; 
			justify-content: space-between;
		}
		.month-list{
			@include flex;
			align-items: center; 
			justify-content: space-between;
			font-size: 24rpx;
			border-bottom: 2rpx solid #eee;
			padding: 26rpx 0;
			.red{
				font-weight: bold;
			}
			.green{
				color: #3CCC50;
				font-weight: bold;
			}
		}
		
	}
	.month-list-box .month-list:last-child{
		border-bottom: none;
	}
</style>
